<template>
    <div class="container">
        <el-form v-model="ruleForm"  status-icon  :rules="rules" class="login_box"> 
            
            <div class="title">九色虹网吧计费管理后台</div>
            
            <el-form-item>
                <el-input type="text" class="inputinfo" v-model="ruleForm.user" placeholder="账号" autocomplete="off">
                    <i slot="prepend" class="el-icon-s-custom"></i>
                </el-input>
            </el-form-item>
                
            <!-- <el-form-item>
                <el-input type="password" class="inputinfo" v-model="ruleForm.pass" placeholder="密码" autocomplete="off">
                    <i slot="prepend" class="el-icon-s-goods"></i>
                </el-input>
            </el-form-item> -->
            <el-form-item v-if="visible" >
                <el-input type="password" class="inputinfo" v-model="ruleForm.pass" placeholder="密码" autocomplete="off">
                    <i slot="prepend" class="el-icon-s-goods"></i>
                    <i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;"
                    class="el-input__icon iconfont el-icon-view"></i>
                </el-input>
            </el-form-item>
            <el-form-item v-else >
                <el-input type="text" class="inputinfo" v-model="ruleForm.pass" placeholder="密码" autocomplete="off">
                    <i slot="prepend" class="el-icon-s-goods"></i>
                    <i slot="suffix" title="隐藏密码" @click="changePass('hide')" style="cursor:pointer;"
                    class="el-input__icon iconfont el-icon-key"></i>
                </el-input>
            </el-form-item>
                
            <el-form-item>
                <el-button type="primary" @click.enter="submitForm()" >登&nbsp;录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return{
                ruleForm:{
                    user:'test',
                    pass:'test'
                },
                visible: true,
                rules:{
                    user:[{
                        required: true,
                        trigger: 'blur',
                        messages:"请输入用户名"
                    }],
                    pass:[{
                        required: true,
                        trigger: 'blur',
                        messages:"请输入密码"
                    }]

                }
            }
        },
        methods: {
            changePass(value) {
                this.visible = !(value === 'show');
            },
            async submitForm(){
                let that = this
                let data = {
                    username: that.ruleForm.user,
                    password: that.ruleForm.pass
                }
                try {
                    const result = await that.$http.get('/webbar/auth/user/serviceLogin',{params:data})
                    console.log(result);
                    if(result.data.status === 1){
                        that.$message({
                            message: 'dlcg',
                            type: 'success'
                        });
                        localStorage.setItem('userInfo',JSON.stringify(result.data.content))
                        console.log(JSON.parse(localStorage.getItem('userInfo')).name)
                        console.log(localStorage.getItem('userInfo'))

                    } else {
                        that.$message({
                            message: result.data.content,
                            type: 'warning'
                        });
                    }
                } catch (error) {
                    console.log(error);
                }
                //that.$http.get('/webbar/auth/user/serviceLogin',{params:data}).then( res => {
                //     console.log(res)
                //     if(res.data.status === 1){
                //         that.$message({
                //             message: 'dlcg',
                //             type: 'success'
                //         });
                //         localStorage.setItem('userInfo',JSON.stringify(res.data.content))
                //         console.log(JSON.parse(localStorage.getItem('userInfo')).name)
                //         console.log(localStorage.getItem('userInfo'))

                //     } else {
                //         that.$message({
                //             message: res.data.content,
                //             type: 'warning'
                //         });
                //     }
                // }).catch(err => {
                //     console.log(err)
                // }) 
            }
            // async submitForm(e){
            //     e.preventDefault()
            //     try{
            //         const result=await this.$http.get('/auth/user/serviceLogin',{params:this.ruleForm})
            //         //console.log(result.data.token)
            //         if(result.code=='0'){
            //             //alert(result.data.message)
            //             this.$store.commit('settoken',result.token)
            //             window.localStorage.setItem('taken',result.token)
            //             this.$router.replace({path:'/index'})//登录成功跳转到首页
            //         }else{
            //             alert(result.message)
            //         }
            //     }catch(err){
            //         console.log(err)
            //     }
            // }
        }
    }
</script>

<style lang="scss">
.container{
    width: 100%;
    min-height: 100%;
    background: url(https://jsh.jshwl.net/static/img/login-bg.0899ffa.0899ffa6.jpg);
    background-size: cover;
    overflow: hidden;
    .login_box{
        position: absolute;
        right: 10%;
        top:35%;
        width: 330px;
        max-width: 100%;
        margin: 0 auto;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 5px;
        padding: 35px;
        overflow: hidden;
        .title{
            margin: 0 auto;
            font-size:26px;
            font-weight: bold;
            margin-bottom: 30px;
        }
        .inputinfo{
            height: 50px;
            background-color: rgba(0,0,0,.2);
            border-radius:5px;
            .el-input-group--append .el-input__inner, .el-input-group__prepend{
                background-color:transparent;
                border: none;
                padding:0 0 0 20px;
            }
            .el-input__inner{
                background-color:transparent;
                height: 50px;
                line-height: 50opx;
                border: none;
                color: #333;
            }
            i{
                color: #333;
                font-size: 20px;
                height: 50px;
                line-height: 50px;
            }
        }
        .el-button--primary{ width: 100%;}
        
    }
}
</style>